<template>
  <div class="app-container">

    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('名称')"></el-table-column>
        <el-table-column prop="type" :label="$t('文件类型')">
          <template slot-scope="{ row }">
            <span v-if="row.type == 'image'">{{ $t("图片") }}</span>
            <span v-if="row.type == 'video'">{{ $t("视频") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="role" :label="$t('上传者角色')"></el-table-column>
        <el-table-column prop="agency" :label="$t('上传者名字')"></el-table-column>
        <el-table-column prop="remark" :label="$t('备注')"></el-table-column>
        <el-table-column prop="create_time" :label="$t('创建时间')"></el-table-column>
        <el-table-column prop="update_time" :label="$t('修改时间')"></el-table-column>
        <el-table-column :label="$t('操作')" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="permissions.indexOf('/screenadv/auditMaterial') != -1"
              type="primary"
              size="mini"
              @click="handleExamine(scope.row)"
            >{{$t('审核')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 审核 -->
    <el-dialog
      width="900px"
      title="审核"
      :visible.sync="showDetail"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="img_list u-f">
          <p class="lable u-f">
            <span class="font14 text_black">{{ $t("素材") }}：</span>
          </p>
          <img class="img" :src="detailFrom.file" v-if="detailFrom.type == 'image'">
          <video class="video" :src="detailFrom.file" controls="controls" v-if="detailFrom.type == 'video'"></video>
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("状态") }}：</span>
          </p>
          <el-radio-group v-model="status">
            <el-radio :label="1">{{ $t("通过") }}</el-radio>
            <el-radio :label="2">{{ $t("拒绝") }}</el-radio>
          </el-radio-group>
        </div>
        <div class="ipt_list u-f">
          <p class="lable u-f">
            <span class="font14 text_black">{{ $t("备注") }}：</span>
          </p>
          <el-input
            v-model="remark"
            autosize
            type="textarea"
            :placeholder="$t('请输入')"
          ></el-input>
        </div>
        <el-button type="primary" @click="examineSubmit">{{
          $t("提交")
        }}</el-button>
      </div>
    </el-dialog>

    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "screenadv-auditList",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      tableData: [],
      detailFrom: {},
      status: 1,
      remark: '',
      showDetail: false
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.getData()
    },
    getData() {
      util
        .$http("/screenadv/auditList?page=" + this.page, {
          page_size: this.page_size
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData()
    },
    handleExamine(row) {
      this.detailFrom = row
      this.remark = row.remark
      this.status = 1
      this.showDetail = true
    },
    examineSubmit() {
      util
        .$http("/screenadv/auditMaterial", {
          id: this.detailFrom.id,
          status: this.status,
          remark: this.remark
        })
        .then(res=>{
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.detailFrom = {}
            this.remark = ''
            this.status = 1
            this.showDetail = false
            this.getData()
          }
        })
    },
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .txt_list {
  margin-bottom: 20px;
}
.order_detail .txt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .img_list {
  margin-bottom: 20px;
}
.order_detail .img_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .img_list .img {
  width: 200px;
}
.order_detail .img_list .video{
  width: 400px;
  height: 250px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-textarea {
  width: 300px;
}
</style>
<style>
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>